<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>

    <link href="../../../css/sys.css" type="text/css" rel="stylesheet"/>

</head>

<body class="emp_body">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
        <td class="topg"></td>
    </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" class="wukuang" width="100%">
    <tr>
        <td width="1%"><img src="../../../images/tleft.gif"/></td>
        <td width="44%" align="left">[添加咨询学生]</td>

        <td width="52%" align="right">
            <%--保存 --%>
            <a href="javascript:void(0)" onclick="submit()">
                <img src="../../../images/button/save.gif"/>
            </a>
            <a href="#"><img src="../../../images/button/tuihui.gif"/></a>
        </td>
        <td width="3%" align="right"><img src="../../../images/tright.gif"/></td>
    </tr>
</table>

<form action="refer/referAction_add.action" method="post">
    <table width="89%" class="emp_table" style="" align="left" cellspacing="0">
        <tr>
            <td width="120px" height="35" align="left">姓名：</td>
            <td width="300px" align="left">
                <input type="text" name="name" value="" id="name"/>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td>电话：</td>
            <td><input type="text" name="telephone" id="telephone" value=""/></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>QQ：</td>
            <td><input type="text" name="qq" id="qq" value=""/></td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>意向级别：</td>
            <td>
                <select name="intentionLevel" id="intentionLevel">
                    <option value="">--请选择意向级别--</option>
                    <option value="A.马上报名">A.马上报名</option>
                    <option value="B.想报名，考虑中">B.想报名，考虑中</option>
                    <option value="C.有报名意向，但暂时不能报名">C.有报名意向，但暂时不能报名</option>
                    <option value="D.不能报名，以及其他原因">D.不能报名，以及其他原因</option>
                </select>
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>意向学科：</td>
            <td>
                <select name="courseTypeId" id="courseTypeId">
                    <option value="-1">----请--选--择----</option>
                </select>
                &nbsp;&nbsp;&nbsp;意向班级：
                <select name="classId" id="classId">
                    <option value="-1">----请--选--择----</option>
                </select>
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td height="41" align="left">来源：</td>
            <td align="left">
                <select name="source" id="source">
                    <option value="">--请选择来源--</option>
                    <option value="1.QQ">1.QQ</option>
                    <option value="2.电话咨询">2.电话咨询</option>
                    <option value="3.上门">3.上门</option>
                    <option value="4.其他（老学员推荐）">4.其他（老学员推荐）</option>
                </select>
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td align="left">备注：</td>
            <td align="left">
                <textarea name="remark" id="remark" cols="60" rows="5"></textarea>
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;</td>
        </tr>
    </table>
</form>
<script src="../../../js/jquery-3.2.1.js"></script>
<script>

    showSubject();
    //动态显示学科
    function showSubject() {
        $.ajax({
            url: "/showSubject",
            type: "post",
            success: function (result) {
                if (result.flag) {
                    $("#courseTypeId").empty("");
                    couresType(result.data);
                }
            }
        });
    }
    //动态显示班级
    function showClasses(couresTypeId) {
        if (couresTypeId == -1){
            $("#classId").empty("");
            $("#classId").append("<option value='-1'>----请--选--择----</option>");
        }else {
            $.ajax({
                url: "/showClasses",
                type: "post",
                data:{
                    couresTypeId:couresTypeId
                },
                success: function (result) {
                    if (result.flag){
                        $("#classId").empty("");
                        console.log(result.data);
                        classes(result.data);
                    }
                }
            });
        }
    }
    //一级分类点击事件触发二级分类(即学科触发查询该学科对应的所有班级)
    $("#courseTypeId").click(function () {
        var a = $('#courseTypeId').val();
        console.log("一级分类的值:"+a);
        showClasses(a);
    });
    //动态拼接规则学科
    function couresType(subjects) {
        $("#courseTypeId").append("<option value='-1'>----请--选--择----</option>");
        for (var i in subjects) {
            var op = $("<option value='" + subjects[i].coursetypeid + "'>" + subjects[i].coursename + "</option>");
            var select = $("#courseTypeId");
            select.append(op);
        }
    }
    //动态拼接规则班级
    function classes(classes) {
        $("#classId").append("<option value='-1'>----请--选--择----</option>");
        for (var i in classes) {
            var op = $("<option value='"+classes[i].classid+"'>"+classes[i].name+"</option>");
            var select = $("#classId");
            select.append(op);
        }
    }
    //提交表单信息(添加咨询学生信息)
    function submit() {
        $.ajax({
            url: "/insertRefer",
            type: "post",
            data: {
                name: $("#name").val(),
                telephone: $("#telephone").val(),
                qq: $("#qq").val(),
                intentionLevel: $('#intentionLevel').val(),
                courseTypeId: $('#courseTypeId').val(),
                classId: $('#classId').val(),
                source: $('#source').val(),
                remark: $('#remark').val()
            },
            success: function (result) {
                if (result.flag){
                    alert(result.msg);
                }else {
                    alert(result.msg);
                }
            }
        });
    }
</script>
</body>
</html>
